import { View, Text } from "@tarojs/components";
import { XmImage, XmNavbar, XmPullRefresh } from "@/components/tool";
import React, { Fragment, useEffect } from "react";
import { observer } from "mobx-react";
import { createPolling, onRefund } from "../untils";
import { BaseRouter } from "@/path/router";
import { useOrderDetail } from "@/path/api/common";
import { TypeOrderDetail, TypeOrderList } from "@/path/api/common/type";
import dayjs from "dayjs";
import "./index.scss";
function Index() {
  const routerInfo = BaseRouter.getData<TypeOrderList.Item>()
  const { resData: orderInfo, run: getOrderInfo } = useOrderDetail()
  const orderPolling = createPolling(function () {
    return getOrderInfo({
      no: routerInfo.no
    })
  }, 4000)
  useEffect(() => {
    if (!routerInfo) return
    orderPolling.startPolling()
    return () => {
      orderPolling.startPolling()
    }
  }, [])
  function onOrderRefund() {
    onRefund({
      no: orderInfo.no,
      num: orderInfo.num
    }).then(() => {
      BaseRouter.back({ data: "refunded" })
    })
  }
  // point_1: number  // 财神殿核销次数
  // point_2: number  // 文昌殿核销次数
  // point_3: number  // 三清殿核销次数
  // point_1_num: number  // 财神殿剩余核销次数
  // point_2_num: number  // 文昌殿剩余核销次数
  // point_3_num: number  // 三清殿剩余核销次数
  const _hexiao = (function (val: TypeOrderDetail.returnedVal) {
    type TypeItem = { title: string; num: number; total: number; }
    const _list: TypeItem[] = [
      { title: "财神殿", num: val.point_1, total: val.point_1_num },
      { title: "文昌殿", num: val.point_2, total: val.point_2_num },
      { title: "三清殿", num: val.point_3, total: val.point_3_num },
    ]
    const obj: { num: number, hasHxList: TypeItem[], notHxList: TypeItem[] } = {
      num: 0,
      hasHxList: _list.filter(v => v.num > 0),
      notHxList: _list.filter(v => v.total > 0),
    }
    for (let i = 0; i < _list.length; i++) {
      const _ele = _list[i];
      obj.num = obj.num + _ele.total
    }
    return obj
  })(orderInfo)
  /**核销状态:0=未核销,1=已部分核销,2=已全部核销 */
  // status: 0 | 1 | 2  // 
  /**支付状态:0=待付款,1=已付款,2=部分退款,3全部退款 */
  // pay_status: 1 | 0 | 2 | 3,     // 支付状态:0=待付款,1=已付款,2=部分退款,3全部退款
  const btntxt = (function (order) {
    const todayEnd = dayjs().startOf("day");
    const _useTime = dayjs(Number(order.time) * 1000).endOf("day")
    if (_useTime.isBefore(todayEnd)) return "已过期"
    if ((Number(order.status) === 0 || Number(order.status) === 1) && (Number(order.pay_status) === 1 || Number(order.pay_status) === 2)) {
      return "待使用"
    }
    if (Number(order.status) === 2) {
      return "已全部核销"
    }
    if (Number(order.pay_status) === 3) {
      return "已全部退款"
    }
    if (Number(order.pay_status) === 0) {
      return "待付款"
    }
  })(orderInfo)
  return <View className="bg-page">
    <XmNavbar title="核销门票" fixed={false}></XmNavbar>
    <XmPullRefresh className="verification-page" navigationStyle="custom">
      <View className="card">
        <View className="card-tit flex flex-s">
          <Text className="f-weight-bold s-lg-1-1 c-black">玄妙观门票</Text>
          <Text className="s-md-2 c-gray-7">{dayjs(Number(orderInfo.time) * 1000).format("YYYY-MM-DD")}</Text>
        </View>

        {/* <View className="card-img"></View> */}
        <XmImage className="card-img" src={orderInfo.qrcode}></XmImage>
        <View className="card-word s-md-2 c-gray-7">购票时间：{dayjs(Number(orderInfo.pay_time) * 1000).format("YYYY-MM-DD HH:mm:ss")}</View>
        <View className="card-word s-md-2 c-gray-7">订单号：{orderInfo.no}</View>
        <View className="verification-btn s-lg-1 f-weight-bold t-center c-white">{btntxt}</View>
        {orderInfo.refund === 1 ? <View className="return-btn s-md  t-center c-gray-6" onClick={onOrderRefund}>申请退款</View> : null}
      </View>
      {(_hexiao.hasHxList.length > 0 || _hexiao.notHxList.length > 0) ? <View className="card card-2">
        {_hexiao.hasHxList.length > 0 ? <View className="s-md-2 c-black t-left">
          <View>已核销：</View>
          {_hexiao.hasHxList.map((val, idx) => (val.num > 0 ? <Text className="f-weight-bold s-lg-1-1" key={idx}>
            {val.title}({val.num})
            {(idx < _hexiao.hasHxList.length - 1) ? "、" : ""}</Text> : null))}
        </View> : null}
        {_hexiao.notHxList.length > 0 ? <View className="s-md-2 c-black t-left">
          <View>剩余核销次数{_hexiao.num}次：</View>
          <Text>剩余</Text>
          {_hexiao.notHxList.map((val, idx) => (val.total > 0 ? <Text className="f-weight-bold s-lg c-dark" key={idx}>
            {val.title}({val.total})
            {(idx < _hexiao.notHxList.length - 1) ? "、" : ""}
          </Text> : null))}
        </View> : null}
      </View> : null}
    </XmPullRefresh>
  </View>
}
const Higher = React.memo(observer(Index));
export default () => <Fragment><Higher /></Fragment>